<template>
	<view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#F00"></u-tabs>
		<view class="team-list-box">
			<view class="team-item" v-for="(item,index) in dataList" :key="index">
				<image :src="item.avatar"
				 class="avatar" mode="widthFix"></image>
				 <view class="menber-info">
					 <view class="nickname">{{ item.nickname }}</view>
					 <!-- <view class="time">2021-10-10</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '推荐会员'
				}, {
					name: '下级分销商'
				}, {
					name: '下下级分销商'
				}],
				current: 0,
				page_index: 0,
				has_more: true,
				status: 'loadmore',
				dataList: []
			}
		},
		onLoad() {
			this.getDataList()
		},
		methods: {
			change(index) {
				this.current = index;
				this.page_index = 0;
				this.has_more = true;
				this.getDataList()
			},
			getDataList(){
				if (!this.has_more){
					return
				}
				this.page_index++
				let that = this
				that.$api.fenxiao.getTeamList({page:that.page_index,type:this.current+1}).then(res => {
					console.log(res)
					that.dataList = res.list
					that.has_more = res.page_info.has_more
					that.status = that.has_more ? 'loadmore' : 'nomore';
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.team-list-box{
		padding: 0 30upx;
		
		.team-item{
			background-color: #FFF;
			margin-top: 30upx;
			padding: 30upx;
			font-size: 28upx;
			border-radius: 10upx;
			display: flex;
			
			.avatar{
				width: 90upx;
				height: 90upx;
				border-radius: 50%;
			}
			
			.menber-info{
				padding-left: 20upx;
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.time{
					color: #909399;
				}
			}
		}
	}
</style>
